<template>
    <el-card class="box-card">
        <div>
            <div>
                <el-row :gutter="10">
                    <el-col :span="4">总实际到账金额：{{cashCount}}</el-col>
                    <el-col :span="4">总提现金额：0</el-col>
                </el-row>
                <br>
                <el-row :gutter="10">
                    <el-col :span="6">
                        姓名：<el-input style="width:200px" v-model="queryName" placeholder="姓名查询"></el-input>
                    </el-col>
                    <el-col :span="9">
                        申请日期:
                        <el-date-picker
                            value-format="timestamp"
                            v-model="datePicker"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            >
                        </el-date-picker>
                    </el-col>
                </el-row>
                <br>
                <el-row :gutter="10">
                    <el-col :span="1.5"><el-button type="primary">全部（0）</el-button></el-col>
                    <el-col :span="1.5"><el-button type="primary">提现申请</el-button></el-col>
                    <el-col :span="2.5"><el-button type="primary">提现中（0）</el-button></el-col>
                    <el-col :span="2.5"><el-button type="primary">提现成功（0）</el-button></el-col>
                    <el-col :span="5"><el-button type="primary">提现失败（0）</el-button></el-col>
                    <el-col :span="1.5"><el-button type="primary" @click="exportExcel('manifestList')">导出数据到Excel</el-button></el-col>
                    <el-col :span="1.5"><el-button type="primary" @click="getWithdrawStatus">查询</el-button></el-col>
                    <el-col :span="1"><el-button type="primary">重置</el-button></el-col>
                </el-row>
            </div>
            <br>
            <el-table ref="manifestListData" :data="manifestListData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
                <el-table-column prop="_id" label="ID" width="width"></el-table-column>
                <el-table-column prop="name" label="姓名" width="width"></el-table-column>
                <el-table-column prop="idcard" label="身份证" width="width"></el-table-column>
                <el-table-column prop="prop" label="手机号" width="width"></el-table-column>
                <el-table-column prop="" label="提现金额" width="width">0</el-table-column>
                <el-table-column prop="getCash" label="实际到账" width="width"></el-table-column>
                <el-table-column prop="bankCard" label="银行卡" width="width"></el-table-column>
                <el-table-column prop="getDate" label="提现申请时间" width="width"></el-table-column>
                <el-table-column fixed="right" prop="" label="操作" width="width">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="editForm(scope.row)">编辑</el-button>
                        <el-button type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[4,8]"
                :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total='manifestListData.length'>
            </el-pagination>

            <el-dialog
                title="编辑提现列表"
                :visible.sync="dialogVisible"
                width="40%"
                >
                <span>
                    <el-form ref="editManifest" v-model="editManifest" label-width="20%">
                        <el-form-item label="身份证：" label-width="25%">
                            <el-input style="width:90%" v-model="editManifest.idcard"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号：" label-width="25%">
                            <el-input style="width:90%" value="11111111111"></el-input>
                        </el-form-item>
                        <el-form-item label="实际到账：" label-width="25%">
                            <el-input style="width:90%" v-model="editManifest.getCash"></el-input>
                        </el-form-item>
                        <el-form-item label="银行卡：" label-width="25%">
                            <el-input style="width:90%" v-model="editManifest.bankCard"></el-input>
                        </el-form-item>
                    </el-form>

                </span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
            </el-dialog>

        </div>
    </el-card>
</template>

<script>
import FileSaver from 'file-saver';
import XLSX from 'xlsx';

    export default {
        name:'manifestList',
        data() {
            return {
                manifestListData:[{
                    _id:'ffdfdsfdsfsd',
                    name:'dsadsa'
                }],
                cashCount:0,
                queryName:'',
                dialogVisible:false,
                editManifest:[],
                datePicker:[],
                currentPage: 1, // 默认开始页面
                pagesize: 4,
                total: 0,
            }
        },
        created() {
            this.getWithdrawStatus();
        },
        methods: {
            handleSizeChange (size) {
                console.log(`每页 ${size} 条`)
                this.pagesize = size
            },
            handleCurrentChange (currentPage) {
                this.currentPage = currentPage
                console.log(`当前页: ${currentPage}`)
            },
            //打开对话框
            editForm(manifest){
                this.editManifest = manifest;
                console.log(this.editManifest)
                this.dialogVisible = true;
            },
            //获取所有提现金额
            getCashCount(){
                var cash = 0;
                for(var index in this.manifestListData){
                    cash += this.manifestListData[index].getCash;
                }
                this.cashCount = cash;
            },
            //获取提现列表，根据条件查询和操作
            async getWithdrawStatus(){
                //获得时间戳
                // var beginTime = null;
                // var endedTime = null;
                // if(this.datePicker[0]!=null){
                //     beginTime = Date.parse(this.datePicker[0]);
                //     endedTime = Date.parse(this.datePicker[1]);
                // }
                //解决清空日期，datePicker被置为null，取不到数组数据的问题
                if(this.datePicker==null)this.datePicker = []
                console.log(this.datePicker);
                const {data:res} = await this.$axios.post('getWithdrawStatus',{
                    name:this.queryName,
                    startTime:this.datePicker[0],
                    endTime:this.datePicker[1]
                });
                // console.log(res.tarArr);
                this.manifestListData = res.tarArr;
                this.getCashCount();
                // console.log(this.datePicker)
            },

            //导出Excel
            exportExcel(excelName) {
                //excelName --设置导出的excel名称
                //report-table --对应的要导出的el-table的ref名称
                try {
                    const $e = this.$refs['manifestListData'].$el;
                    // 如果表格加了fixed属性，则导出的文件会生产两份一样的数据，所以可在这里判断一下
                    let $table = $e.querySelector('.el-table__fixed');
                    if (!$table) {
                    $table = $e;
                    }
                    // 为了返回单元格原始字符串，设置{ raw: true }
                    const wb = XLSX.utils.table_to_book($table, { raw: true });
                    const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
                    FileSaver.saveAs(
                        new Blob([wbout], { type: 'application/octet-stream' }),
                        `${excelName}.xlsx`,
                    );
                } catch (e) {
                    if (typeof console !== 'undefined') console.error(e);
                }
            },
        },

    }
</script>

<style lang="scss" scoped>

</style>